<style scoped lang="less">
	//照片集
        .photoClow1{//一行2个
            padding: 15px 1px 11px 25px;
            .div{
                width: 152px;
                height: 243px;
                margin-bottom:25px; 
                margin-right: 24px;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    height: 100%;
                }
            }              
        }
        .photoClow2{//一行3个
            padding: 15px 13px 15px 25px;
            .div{
                width: 101px;
                height: 162px;
                margin-bottom:15px; 
                margin-right: 12px;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    height: 100%;
                }
            }              
        }
        //视频
        .videoClow1{//一行2个
            .div{
                font-size: 13px;
                width: 185px;
                div{
                    width: 185px;
                    height: 116px;
                    margin-bottom: 8px;
                     display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        height: 100%;
                    }
                }
                p{
                    line-height: 16px;
                    padding: 0 7px;
                }
                margin-bottom: 10px;
            }
            .div:nth-child(odd){
                margin-right: 7px;
            }
        }
        .videoClow2{//一行2个
            .div{
                font-size: 13px;
                div{
                    width: 122px;
                    height: 77px;
                    margin-bottom: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        height: 100%;
                    }
                }
                p{
                    line-height: 16px;
                    padding: 0 7px;
                }
                margin-bottom: 20px;
            }
            .div:nth-child(3n+1){
                margin: 0 6px;
            }
        }
		// mobile Css style
		.tipShow{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 0.67rem;
			line-height: 0.67rem;
			background: url('../../images/tipbg.png') no-repeat;
			background-size: 100% 100%;
			font-size: 0.32rem;
			color: #158ECE;
			letter-spacing: 1.11px;
			padding: 0 0.35rem;
			z-index: 5;
			img{
				float: right;
				width: 0.27rem;
				height: 0.27rem;
				margin-top: 0.21rem;
			}
		}
		.leftAbout2,.rightBtn2{
			top:1.04rem;
		}
		.otherPeople2{
			top:2.37rem;
		}
		.musicBtnPlay{
			animation:mymove 1.5s infinite linear;
		}
		@keyframes mymove{
			from {transform: rotate(0deg);}
			to {transform: rotate(360deg);}
		}
		.photoHeight{
			height: 3.04rem;
		}
</style>
<template>	
<div>

	<!--mobile-->
	<!--一次性链接提示  -->	
	<div class="tipShow" v-show="tipShow">此链接仅用于传记预览，审核将在24小时内处理。<img src="../../images/tipclose.png" @click="closeTipShow()"/></div> 
	<!--组件-->
	<v-aboutUs :class="aboutUs" @tell-me-classname="name"></v-aboutUs>
	<v-input  :productCount="productCount" :cemeteryId="cemeteryId" :mzid="mzid"></v-input>
	<!--按钮-->
	<div :class="leftAbout" @click="openLeft(aboutUs)"><img src="../../images/mobileMore.png" /></div>
	<div class="ServiceBtn" @click="feedback" ><img src="../../images/kefu.png"/></div><!-- 客服反馈 -->
	<!--音乐  -->
	<div :class="rightBtn">
		<!-- <div :class="musicBtn" @click="musicPlay()" ><audio src="http://lifebookmusic.oss-cn-hangzhou.aliyuncs.com/music/201708/20170801/201708011859013741.mp3" ref="audio" loop></audio></div>		 -->
		<div :class="musicBtn" @click="musicPlay()" v-show="musicUrl"><audio id="audio" :src="musicurl+musicUrl" preload ref="audio" loop autoplay preload></audio></div>		 
		<div :class="otherPeople"  @click="graveclick"  v-show="graveType == 2"><img src="../../images/tabUser.png"/></div><!-- 单双墓穴切换 -->	
	</div>


	<div class="templateWarp" ref="warp1">
		<div v-for="(item,indexbig) in headerstyle">
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==1">
				<!--头像-->
				<div :style="filterFn(item.moduleImageDivStyle)"><img :src="imgurl+item.cemeteryIntroduction.headPictureSource" style="width: 100%;height: 100%;"/></div>
				<!--姓名-->
				<div :style="filterFn(item.nameStyle)" ref="nameStyle">{{item.cemeteryIntroduction.userName}}</div>
				<!--出生日期-->
				<div :style="filterFn(item.introductionDayStyle)" ref="introductionStyle">{{birthdayTime(item.cemeteryIntroduction.birthDay)+birthDayAnd+birthdayTime(item.cemeteryIntroduction.deadDay)}}</div>
				<!--个人简介-->
				<div :style="filterFn(item.introductionStyle)" ref="introductionDayStyle">{{item.cemeteryIntroduction.introduction}}</div>
				<v-edittext :textflag="item.templateModuleContent"></v-edittext>
				<img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" ref="picstyle" :style="filterFn(item1.picStyle)">
				<!-- <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModuleVideoDTO" ref="spstyle" :style="filterFn(item1.videoStyle)"> -->
				<video :src="videourl+item1.videoPath" v-for="(item1,index) in item.templateModuleVideoDTO" :poster="imgurl+item1.videoPicSourcePath" :style="filterFn(item1.videoStyle)" controls></video>
			</div>
			<!--墓志铭-->
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==2">
				<!--标题-->
				<div  :style="filterFn(item.nameStyle)"  ref="nameStyle" >{{item.moduleTitle}}</div>
				<!--内容-->
				<div  :style="filterFn(item.epitaphStyle)"  ref="epitaphStyle">{{item.cemeteryEpitaph.content}}</div>
				<!--图片素材-->
				<v-edittext :textflag="item.templateModuleContent"></v-edittext>
				<img :src="imgurl+item.picSourcePath" :style="filterFn(picStyle)" v-for="(item,index) in item.templateModulePicDTO" ref="picstyle">
				<!-- <img :src="imgurl+item.picSourcePath" :style="filterFn(picStyle)" v-for="(item,index) in item.templateModuleVideoDTO" ref="spstyle"> -->
				<video :src="videourl+item1.videoPath" v-for="(item1,index) in item.templateModuleVideoDTO" :poster="imgurl+item1.videoPicSourcePath" :style="filterFn(item1.videoStyle)" controls></video>
			</div>
			<!--照片-->
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==3">
				<!--标题-->
				<div :style="filterFn(item.nameStyle)">
					<!--图标-->
					<img :src="imgurl+item.moduleIcon" :style="filterFn(item.moduleIconStyle)"/>
					<!--标题-->
					<div :style="filterFn(item.moduleTitleStyle)" >{{item.moduleTitle}}</div>
				</div>
				<!--内容-->
				<div :style="filterFn(item.moduleSwiperStyle)" class="photoDivConM">
					<div >
						<swiper :options="swiperOption" :attr="indexbig">
							<!-- 幻灯内容 -->
							<swiper-slide v-for="(items,index) in (item.photos) ">								
								<div  class="imgshow"  @click="bigpng(index,headerstyle[indexbig].photos)"><img :src="imgurl+items.albumPath" :style="items.imageStyle"></div>								
							</swiper-slide>
						</swiper>
					</div>
				</div>
			</div>
			<!--人生旅途-->
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==4">
					<!--标题-->
				<div :style="filterFn(item.nameStyle)">
					<!--图标-->
					<img :src="imgurl+item.moduleIcon" :style="filterFn(item.moduleIconStyle)"/>
					<!--标题-->
					<div :style="filterFn(item.moduleTitleStyle)">{{item.moduleTitle}}</div>
				</div>
				<!--内容-->
				<div>
					<!--时间轴-->
					<div :style="filterFn(item.moduleSwiperStyle)">
						<swiper :options="rsOption" ref="mySwiperB">
							<!-- 幻灯内容 -->
							<swiper-slide v-for="(items,index) in (item.lifes)">
								<div :style="filterFn(item.moduleSwiperDivStyle)">
									<p :style="filterFn(item.moduleSwiperPStyle)" class="tripConTimeM">{{stringfilter(items.startTimeAndEndTime)}}</p>
									<div :style="filterFn(item.moduleSwiperDiv2Style)"></div>
									<div v-if="iconcheckflag==index" class="tripConDot tripConDot1" @click.stop="rscheckimg(index,headerstyle[indexbig].lifes)" :style="filterFn(item.moduleSwiperIconStyle)"><img :src="imgurl+item.moduleSwiperIcon0Path" /></div>
									<div v-else class="tripConDot tripConDot2" @click.stop="rscheckimg(index,headerstyle[indexbig].lifes)" :style="filterFn(item.moduleSwiperIconStyle)"><img :src="imgurl+item.moduleSwiperIcon1Path" /></div>
								</div>
							</swiper-slide>
						</swiper>
					</div>
					<!--内容-->
					<div :style="filterFn(item.moduleContentStyle)" v-text="rstext"></div>
					<!--图片-->
					<div :style="filterFn(item.moduleImageDivStyle)" class="displayflex overflow">
						<img :src="rsimgurl?imgurl+rsimgurl:staticimg+'/images/blank4.png'" :style="filterFn(rsstyle)"/>
					</div>
				</div>
			</div>
			<!--作品集-->
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==6">
				<!--标题-->
				<div :style="filterFn(item.nameStyle)">
					<!--图标-->
					<img :src="imgurl+item.moduleIcon" :style="filterFn(item.moduleIconStyle)"/>
					<!--标题-->
					<div :style="filterFn(item.moduleTitleStyle)">{{item.moduleTitle}}</div>
				</div>
				<!--内容-->
				<div :style="filterFn(item.moduleSwiperPStyle)" class="workConM">
					<swiper :options="zpOption">
						<!-- 幻灯内容 -->
						<swiper-slide v-for="(items,index) in (item.works)">
							<div :style="filterFn(item.moduleSwiperDivStyle)" @click="toWorkShow(items.id)">
								<div :style="filterFn(item.moduleImageDivStyle)"><img :src="items.pictureCoverPath?imgurl+items.pictureCoverPath:staticimg+'/images/blank2.png'" :style="filterFn(items.imageStyle)"/></div>
								<p :style="filterFn(item.moduleSwiperPStyle)">
									{{items.worksName}}
								</p>
							</div>
						</swiper-slide>
					</swiper>
				</div>
			</div>
			<!--视频-->
			<div :style="filterFn(item.headerStyle)" :ref="'height'+indexbig" :type="item.type" v-if="item.type==5">
				<!--标题-->
				<div :style="filterFn(item.nameStyle)">
					<!--图标-->
					<img :src="imgurl+item.moduleIcon" :style="filterFn(item.moduleIconStyle)"/>
					<!--标题-->
					<div :style="filterFn(item.moduleTitleStyle)">{{item.moduleTitle}}</div>
				</div>
				<!--内容-->
				<div :style="filterFn(item.moduleSwiperStyle)" >
					<swiper :options="spOption">
						<!-- 幻灯内容 -->
						<swiper-slide v-for="(items,index) in (item.videos)"  class="videoConM">												
								<div :style="filterFn(item.moduleImageDivStyle)" class="videoConImg">
									<img :src="items.videoPicPath?imgurl+items.videoPicPath:staticimg+'/images/blank3.png'" :style="filterFn(item.moduleImageStyle)"/>
									<div class="icon" @click="playVideo(index)"></div>
								</div>
								<video :src="videourl+items.videoPath" v-show="false" ref="videoRef"></video>
								<p :style="filterFn(item.moduleSwiperPStyle)" class="videoConTitle">
									{{items.videoName}}
								</p>                                       												
						</swiper-slide>
					</swiper>
				</div>
			</div>	
		</div>
	</div>
	<!--照片展示区域-->
	<div @click="canbighide" v-show="photo">
		<swiper :options="bigshowswiper" :class="bigshow" ref="mySwiperA">
			<swiper-slide v-for="(item,index) in photo">
				<img :src="pcorphone ? imgurl+item.albumPath :imgurl+item.albumPath" :style="item.imageStyle"/>						
			</swiper-slide>
		</swiper>
	</div>
	<!--大屏播放视频  -->
	<div class="play-video" v-show="bigPlayVideoShow">
		<div class="play-video-div">	
			<div class="play-video-div-close" @click="closeBigPlay"><img src="../../images/close.png"/></div>
			<video controls="controls" :src="bigPlayVideo" ref="bigvideoname"></video>
		</div>
	</div>
</div>
</template>
<script>
    import { mapState } from 'vuex'
	import left from '../../components/aboutUs.vue'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import global from '../../config/global'
	//.substring(0,substrtext.journeyLength)}}{{rstext.eventContent.length>substrtext.journeyLength?'...':''   字数限制
    import '../../js/flexible.debug.js'
    import '../../less/moblie.less'
    export default {
		data() {
			return {
				rsstyle:"",
				leftAbout:"leftAbout leftAbout2",
				rightBtn:"rightBtn rightBtn2",
				otherPeople:"otherPeople otherPeople2",
				musicBtn:"musicBtn musicBtnPlay",
				ismusicPlay:true,//音乐是否在播放
				musicUrl:"",//音乐路径
				tipShow:true,
				cemeteryId:"",//陵园ID
				mzid:"",//墓主ID
				graveType:"",//单双人穴位
				iconcheckflag:0,
				imgurl:global.imgurl,
				staticimg:global.staticimg,
				videourl:global.videourl,
				musicurl:global.musicurl,
				hosturl:global.host,
				imgarr:{
					"hid":"375"
				},
				rsOption:{slidesPerView:2,initialSlide:0,notNextTick: true},
				aboutUs:"aboutUs aboutUs-close",
				base:{
					"birthDay":"",
					"shareTitle":"",
					"userName":"",
					"shareContent":"",
					"introduction":"",
					"sharePicPathThumbnail":"",
					"headPictrure":"",
					"epitaph":""
				},
                global:"",
				photo:"",
				bigpngdata:"",
				bigshow:"showPhoto",
				bigIndex:0,
				rsdata:"",//人生旅途
				workdata:"",//作品集信息
				videodata:"",//视频信息
				workSwiper:"",
				videoSwiper:"",
				rstext:"",//人生旅途内容图片
				rsactive:0,//人生旅途当前状态
				substrtext:"",//模版数据
				bigshowswiper:{initialSlide:0,notNextTick: true,autoplay:1000},
				productCount:"",//判断商城是否显示
				hid:"",
				type:"",
				sharetitle:"",
				sharedesc:"",
				shareimgUrl:"",
				//videoflag:!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
				wrapDiv:false,//整个页面默认隐藏
				pcorphone:"",//判断手机或者PC
				bigPlayVideo:"",//大屏播放视频路径
				bigPlayVideoShow:false,
				tempurl:"",
				autoi:0,//轮播I
				audioontrue:"audio",
				headerstyle:"",
				swiperOption:{
                    slidesPerView:3,
                    slidesPerColumn: 1,
                    notNextTick: true
                },
				zpOption:{
                    slidesPerView:3,
                   slidesPerColumn: 3,
                   slidesPerColumnFill : 'row',
                   debugger: false,
                   onTransitionStart(swiper){
                   }
                },
				spOption:{
                   slidesPerView:2,
                   slidesPerColumn: 3,
                   slidesPerColumnFill : 'row',
                   debugger: false,
                   onTransitionStart(swiper){
                   }
				},
				pageindexId:[],
				customized:"",//是否是电子墓碑
				birthDayAnd:"",

			}
		},
		components: {
			swiper, swiperSlide
		},
		computed: {
			swiper() {
				
			}
		},
		
		created() {
			this.hid=this.$route.query.hid;
			if(/\&/g.test(window.location.href)){
				this.$router.replace({ path: '/lifebookpreview',query:{"hid":this.hid}})
			}
			this.browserRedirect();
			
			//this.launchFullscreen();
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			//'$route':""
		},
		mounted(){			
			this.audiopause();
			var this_=this;
			this.audiopause();
			var this_=this;
			(function audioAutoPlay() {
				var audio = document.getElementById('audio');
					audio.play();
				document.addEventListener("WeixinJSBridgeReady", function () {
					audio.play();
				}, false);
			})();
		},
        computed: mapState({ user: state => state.user }),
		methods:{
			//打开关于我们弹窗
			openLeft:function(){
                this.aboutUs =  "aboutUs";              
            },
            name:function(msg){
                this.aboutUs = msg;
            },
			audiopause(){
				if(this.audioontrue=="audio"){
					this.audioontrue="audioon"
					this.$refs.audio.pause();
					
				}
				else{
					this.audioontrue="audio"
					this.$refs.audio.play();
					
				}
				
			},
			getimgarr(){
				var _this=this;
				//var locationhref=window.location.href.replace("&","#");
				//this.$router.replace({ path: '/',query:{"hid":this.hid,"type":this.type}})
				//window.location.reload()
				this.$http.get(global.host+"/unsecured/weixinShare/getSign?url="+window.location.href)
					.then((response) => {
						wx.config({
						//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							debug:false,
							//必填，公众号的唯一标识
							appId:response.body.appId,

							//必填，生成签名的时间戳
							timestamp:response.body.signMap.timestamp,

							//必填，生成签名的随机串
							nonceStr:response.body.signMap.nonceStr,

							//必填，签名，见附录1
							signature:response.body.signMap.signature,

							//必填，需要使用的JS接口列表，所有JS接口列表见附录2
							jsApiList:['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
						});
						wx.ready(function() {
							//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
							//判断当前版本是否支持指定 JS 接口，支持批量判断
							wx.checkJsApi({
								jsApiList: [
								'onMenuShareAppMessage',  //分享给朋友
								'onMenuShareTimeline',	//分享到朋友圈
								'onMenuShareQQ',			//分享到QQ
								'onMenuShareWeibo',		//分享到腾讯微博
								'onMenuShareQZone'		//分享到QQ空间
								],
								success: function (res) {
								
								}
							});
							//分享数据
							
							//var temp=window.location.href.split("?");
							//var locationstr=temp[0]+"#/?"+temp[2];
							//
							//http://www.reborndata.com/app/#/?hid=0315-00000005
							//0315-00000005
							var shareData = {
								title:_this.sharetitle,
								desc:_this.sharedesc,
								link:window.location.href,
								imgUrl:global.imgurl+_this.shareimgUrl
							};
							console.log(123)
							console.log(shareData);
							console.log(456)
							//分享给朋友
							wx.onMenuShareAppMessage(shareData);
							
							//分享到朋友圈
							wx.onMenuShareTimeline(shareData);
							
							//分享到QQ
							wx.onMenuShareQQ(shareData);
							
							//分享到腾讯微博
							wx.onMenuShareWeibo(shareData);
							
							//分享到QQ空间
							wx.onMenuShareQZone(shareData);
						});
						
						//步骤五：通过error接口处理失败验证
						wx.error(function(res) {
							//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							console.log(JSON.stringify(res));
						});
						
					})
					.catch(function (response) {
					})
			},
            filterFn(obj){
				if(obj==undefined)return;
				var obj=JSON.stringify(obj)
				var a=obj.replace(/\d+\.?\d*px/g,function(name){return (parseInt(name)*1.97/75).toFixed(2)+"rem"})
				var b=eval('('+a+')');
				return b;
            },
			launchFullscreen() {//全屏显示

				var element=document.documentElement;
				 // 先检测最标准的方法
				if(element.requestFullScreen) {
					element.requestFullScreen();
				} else if(element.mozRequestFullScreen) {
					// 其次，检测Mozilla的方法
					element.mozRequestFullScreen();
				} else if(element.webkitRequestFullScreen) {
					// if 检测 webkit的API
					element.webkitRequestFullScreen();
				}

			},
			getdata(){
				var _this=this;
				this.global=global.host;
				this.$http.get(global.host+"/cemeteryOwner/lifebookpreview?hid="+this.$route.query.hid,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
						//判断此二维码是否为有效二维码
						if(response.body.status == 0){
							this.$router.push({ path: '/notewm'});
						}
						//判断单双人穴
						this.graveType = response.body.result.graveType;
						this.musicUrl = response.body.result.musicPath;
						this.cemeteryId = response.body.result.cemeteryId;//陵园ID
						this.mzid = response.body.result.id;//墓主ID
						this.customized = response.body.result.customized;//是否是电子墓碑
						console.log("陵园ID"+this.cemeteryId);
						console.log(this.musicUrl);
						this.productCount = response.body.result.productCount;
						
						//判断页面是否为空
						// if(response.body.status == 0 && response.body.result != null){
						// 	window.location.href=this.imgurl+'/unsecured/cemetery/no/result?cemeteryId='+response.body.result.id;
						// 	return false;
						// }else if(response.body.status == 0 && response.body.result == null){
						// 	window.location.href=this.imgurl+'/static/html/moveTemplate/notewm.html';
						// 	return false;
						// }						
						this.wrapDiv = true;
						//this.headerstyle=response.body.result.cemteryTemplateDTO.templateModuleDTO[5].headerStyle
						this.headerstyle=response.body.result.templateModuleDTO;
						for(var i=0;i<this.headerstyle.length;i++){
							if(_this.headerstyle[i].type==3){
								_this.pageindexId.push({"mkid":_this.headerstyle[i].moduleId,"page":1})
							}
							if(_this.headerstyle[i].type==4){
								_this.rstext=_this.headerstyle[i].lifes[0].eventContent;//人生旅途
								_this.rsimgurl=_this.headerstyle[i].lifes[0].eventPicCutBig;//人生旅途大图
								_this.rsdata=_this.headerstyle[i].lifes;
								_this.rsstyle=_this.headerstyle[i].lifes[0].imageStyle;
							}
							
						}
						
						if(false){
							var timer;
							var tempi=0;
							var rsi=0;
							var phototime;//照片定时器名字
							var rslvtu;//人生旅途定时器名字
							var h=0;
							var arr=[];
							setTimeout(function(){
								
								for(var i=0;i<_this.headerstyle.length;i++){
									h=parseInt(h)+parseInt(_this.$refs["height"+i][0].offsetHeight);
									arr.push({"h":h,"t":_this.$refs["height"+i][0].getAttribute("type")});
									
								}
								function autoplay(i){
									
									if(arr[i].t==3){
										clearInterval(timer);
										var data=_this.headerstyle[i].photos;
										setTimeout(function(){
											_this.bigpng(0,data)
											//_this.$refs.mySwiperA.swiper.startAutoplay(2000)
											phototime=setInterval(function(){
												if(tempi==_this.$refs.mySwiperA.swiper.snapGrid.length){
													_this.canbighide();
													clearInterval(phototime)
													document.body.scrollTop=arr[i].h;
													i++
													timer=setTimeout(function(){autoplay(i)},100)
													return;
												}
												_this.$refs.mySwiperA.swiper.slideTo(tempi++);
											},4000)//照片大图定时
										},6000);
										return;
									}
									else if(arr[i].t==4){//人生旅途
										clearInterval(timer);
										var data=_this.headerstyle[i].lifes;
										setTimeout(function(){
											_this.rscheckimg(rsi,data);
											rslvtu=setInterval(function(){
												if(rsi==_this.$refs.mySwiperB[0].swiper.snapGrid.length){
													//_this.rscheckimg(rsi,data);
													clearInterval(rslvtu);
													document.body.scrollTop=arr[i].h;
													i++
													timer=setTimeout(function(){autoplay(i)},100)
													return;
												}
												
												_this.$refs.mySwiperB[0].swiper.slideTo(rsi++);
												_this.rscheckimg(rsi,data);
											},5002)
										},100)
										return;
									}
									else{
										document.body.scrollTop=arr[i].h;
									}
									i++
									if(i>arr.length){
										return;
									}
									
									timer=setTimeout(function(){autoplay(i)},5002)
								}
								
								timer=setTimeout(function(){autoplay(0)},5002)//滚动条定时
							},2000)
							_this.$refs.warp1.onmousedown=function(){
								clearInterval(timer)
								clearInterval(phototime)
								clearInterval(rslvtu)
							}
							_this.$refs.warp1.ontouchstart=function(){
								clearInterval(timer)
								clearInterval(phototime)
								clearInterval(rslvtu)
							}
						}
						var templeft;
						if(this.substrtext.id>=20){
							templeft=-0.5
						}
						else{
							templeft=0
						}
						this.swiperOption={
							slidesPerView:3,
		                    slidesPerColumn: 1,
							notNextTick: true,
							onTransitionStart(swiper){
								if(swiper.isEnd){
									var page="";
									for(var i=0;i<_this.pageindexId.length;i++){
										if(_this.headerstyle[swiper.container[0].getAttribute("attr")].moduleId==_this.pageindexId[i].mkid){
											_this.pageindexId[i].page++
											page=_this.pageindexId[i].page
										}
									}
									_this.$http.get(global.host+"/unsecured/mobile/ablum/query?cemeteryId="+_this.mzid+"&moduleId="+_this.headerstyle[swiper.container[0].getAttribute("attr")].moduleId+"&startPage="+page+"&pageSize=20")
									.then((response) => {
										_this.headerstyle[swiper.container[0].getAttribute("attr")].photos.push.apply(_this.headerstyle[swiper.container[0].getAttribute("attr")].photos,response.body.result)
									})
									.catch(function (response) {

									})
								}
                            },
						}
                        this.videoSwiper={//视频滑动事件
                            slidesPerView: this.substrtext.videoCount/this.substrtext.videoLineNumber,
                            slidesPerColumn: this.substrtext.videoLineNumber,
                            slidesPerColumnFill : 'row',
                        }
                        this.workSwiper={//作品集滑动事件
                            slidesPerView: this.substrtext.workCount/this.substrtext.workLineNumber,
                            slidesPerColumn: this.substrtext.workLineNumber,
                            slidesPerColumnFill : 'row',
                            // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
                            onTransitionStart(swiper){  
                            },
                        }
						this.sharetitle=response.body.sharetitle?response.body.sharetitle:response.body.userName+'人物传记';
						this.sharedesc=response.body.sharedesc?response.body.sharedesc:response.body.introduction;
						this.shareimgUrl=response.body.shareimgUrl?response.body.shareimgUrl:response.body.headPictrure;
						//播放音乐
						if(!this.pcorphone){
							this.$refs.audio.play();
							//进入全屏模式							
						}
					})
					.catch(function (response) {
					})
					
					
			},
			filter(value) {//value为13位的时间戳
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(value));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();

				return y + '-' + add0(m) + '-' + add0(d) + '';
			},
			bigpng(index,data){
				this.bigIndex=index;
				this.photo=data;
				//this.bigpngdata=this.photo[index].ablumCutName;
				//this.bigshowswiper.initialSlide=index
				this.$refs.mySwiperA.swiper.slideTo(this.bigIndex);
				this.bigshow="showPhoto showPhotoon";
			},
			rscheckimg(index,data){
				this.iconcheckflag=index;
				this.rsdata=data;
				this.rstext=this.rsdata[index];
				this.rsimgurl=this.rsdata[index].eventPicCutBig;
				this.rsimgurlbig=this.rsdata[index].eventPicCutBig;
				this.rsstyle=this.rsdata[index].imageStyle;
				//journeyLength-人生旅途内容字数限制
				var str2=!this.rstext.eventContent?0:this.rstext.eventContent.length>this.substrtext.journeyLength?'...':''
				this.rstext=!this.rsdata[index]?0:this.rsdata[index].eventContent.substring(0,this.substrtext.journeyLength)+str2;
				this.rsactive=index;
			},
			canbighide(){
				this.bigshow="showPhoto"
			},
			graveclick(){
				var a=this.$route.query.hid;
				this.type=this.$route.query.hid.split[2];
				if(this.type==2){
					this.type=1;
					this.$router.push({ path: '/lifebookpreview',query:{"hid":a+"---"+this.type}})
					window.location.reload()
				}
				else{
					this.type=2;
					this.$router.push({ path: '/lifebookpreview',query:{"hid":a+"---"+this.type}})
					window.location.reload()
				}
			},
			toLeft(e){
				e.preventDefault();
				e.stopPropagation();
				
				if(this.bigIndex<=0){
					this.bigIndex=0;
					return false;
				}
				else{
					this.bigIndex=this.bigIndex-1
				}
				this.bigpngdata=this.photo[this.bigIndex].ablumCutName;
				
			},
			toRight(e){
				e.preventDefault();
				e.stopPropagation();
				
				if(this.bigIndex>=this.photo.length-1){
					this.bigIndex=this.photo.length-1;
					return false;
				}
				else{
					this.bigIndex=this.bigIndex+1
				}
				this.bigpngdata=this.photo[this.bigIndex].ablumCutName;
				
			},
			playvideo(index,el){
				//判断PC还是手机
				var _this = this;
				if(this.pcorphone){
					_this.$refs.videoname[index].play()
				}else{
					_this.bigPlayVideo = _this.videourl+_this.videodata[index].videoPath;
					_this.bigPlayVideoShow = true;
					//暂停音乐
					this.audioontrue="audioon";
					this.$refs.audio.pause();
					
				}
			},
			closeBigPlay(){
				this.$refs.bigvideoname.pause();
				this.bigPlayVideoShow = false;	
				this.audioontrue="audio"	
				this.$refs.audio.play();//播放音乐	
			},
			browserRedirect() {	//判断PC或者Phone
				var result = 0;
				var sUserAgent = navigator.userAgent.toLowerCase();
				var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				var bIsMidp = sUserAgent.match(/midp/i) == "midp";
				var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
				var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
				var bIsAndroid = sUserAgent.match(/android/i) == "android";
				var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
				var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
				if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {				
					this.pcorphone =  1;//手机
				} else {				
					this.pcorphone =  0;//PC
				}
				this.getdata();
				this.hengshu();//监听横屏方法
				this.getimgarr();				
			},
			hengshu(){//判断横屏竖屏
				window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
					if (window.orientation === 180 || window.orientation === 0) {
						window.location.reload();
					}
					if (window.orientation === 90 || window.orientation === -90 ){
						window.location.reload();
					} 
				}, false);
			},
			feedback(){//跳转反馈页面
				this.$router.push({ path: '/mobliefeedback',query:{"lyid":this.cemeteryId}});
			},
			closeTipShow(){
				this.rightBtn = 'rightBtn';
				this.leftAbout = 'leftAbout';
				this.tipShow = false;
			},
			musicPlay(){
				if(this.ismusicPlay){
					this.$refs.audio.pause();
				}else{
					console.log('播放');
					console.log(this.$refs.audio);
					this.$refs.audio.play();
				}
				this.ismusicPlay = !this.ismusicPlay;
				this.ismusicPlay ? this.musicBtn = 'musicBtn musicBtnPlay' : this.musicBtn ='musicBtn';
			},
			playVideo(index){
				//播放视频
				console.log(this.$refs.videoRef[index]);
				var _this = this;
				if(this.pcorphone == 1){
					_this.$refs.videoRef[index].play();
					_this.$refs.audio.pause();
				}else{
					_this.bigPlayVideo = _this.$refs.videoRef[index].src;
					_this.bigPlayVideoShow = true;
					//暂停音乐
					this.ismusicPlay = false;
					this.musicBtn ='musicBtn'
					this_.$refs.audio.pause();					
				}

			},
			toWorkShow(id){
				this.$router.push({ path: '/workshow',query:{"id":id}})
			},
			birthdayTime(time){
                console.log("出生日期");                
                console.log(time);           
                function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(time));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				if(this.customized == 1){//判断是否需要中文
					y = this.Arabia(y);				
					m = this.Arabia2(m);				
					d = this.Arabia2(d);	
					this.birthDayAnd = " 至 ";
				    return y + '年' + add0(m) + '月' + add0(d) + '日';                    
				}else{
					this.birthDayAnd = " - ";
				    return y + '-' + add0(m) + '-' + add0(d) + '';
                }
            },
            Arabia(Num){
				for (var i = Num.length - 1; i >= 0; i--) {
					Num = Num.replace(",", "")//替换Num中的“,”
					Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				return newchar;
			},
			Arabia2(Num){				
				for (var　i = Num.length - 1; i >= 0; i--) {
						Num = Num.replace(",", "")//替换Num中的“,”
						Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (var i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						// case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					switch (part[0].length - i - 1) {
						case 0: tmpnewchar = tmpnewchar; break;
						case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 4: tmpnewchar = tmpnewchar + "万"; break;
						case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 8: tmpnewchar = tmpnewchar + "亿"; break;
						case 9: tmpnewchar = tmpnewchar + "十"; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				//替换所有无用汉字，直到没有此类无用的数字为止
				while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
					newchar = newchar.replace("零亿", "亿");
					newchar = newchar.replace("亿万", "亿");
					newchar = newchar.replace("零万", "万");
					newchar = newchar.replace("零零", "零");      
				}
				//替换以“一十”开头的，为“十”
				if (newchar.indexOf("一十") == 0) {
					newchar = newchar.substr(1);
				}
				//替换以“零”结尾的，为“”
				if (newchar.lastIndexOf("零") == newchar.length - 1) {
					newchar = newchar.substr(0, newchar.length - 1);
				}
				return newchar;
			},
			stringfilter(obj){//人生旅途转换时间
                if(!obj){return}
                var a="";
                for(var i=0;i<obj.length;i++){
                    a+="-"+obj[i].substring(0,4)
                }
                
                return a.substring(1);
            },
		},
		
		
		
    }
</script>